<template>
  <div class="back">
    <nav-bar left-arrow @click-left="onClickLeft" :border="false" class="nav" :fixed="true" />
    <!-- <img src="../imgs/背景图.png" alt="" /> -->
    <img src="../../src/imgs/背景图.png" alt="" />
    <article>
      <h4>悦慢小院</h4>
      <h5>愿每一个房间得以满意</h5>
    </article>
  </div>
  <div class="box">
    <cell-group inset>
      <field v-model="username" name="用户名" placeholder="请输入手机号" id="phone" />
      <field v-model="password" name="密码" placeholder="请输入密码" id="phone" v-show="flog" />
      <field v-model="PhoneNumber" center clearable :placeholder="newData" id="password" v-show="show">
        <template #button>
          <Button size="small" type="plain" @click="send" class="my-btn1" v-if="hide">获取验证码</Button>
          <count-down :time="time" format="ss" :class="{ color: hidden }" ref="count" />
        </template>
      </field>
      <field>
        <template #button>
          <Button size="small" type="plain" class="my-btn2" @click="passLogin">{{ isLogin }}</Button>
        </template>
      </field>
    </cell-group>
    <Button round block type="round" @click="Login" class="btn1">登录</Button>
  </div>
  <footer>
    <p>第三方登录</p>
    <ul>
      <li>
        <img src="../imgs/微信.png" />
      </li>
      <li>
        <img src="../imgs/QQ.png" />
      </li>
      <li>
        <img src="../imgs/微博.png" />
      </li>
    </ul>
    <div class="privacy"><input type="checkbox" ref="CheckBox" /><span>登录代表你已同意</span><span>《用户服务协议》和《隐私政策》</span></div>
  </footer>
</template>
<style scoped></style>
<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { NavBar, CellGroup, Field, Button, CountDown } from 'vant'
import { getCode, PostLogin } from '../utils/api.js'
const onClickLeft = () => history.back()
const { push, replace } = useRouter()
const time = ref(5 * 1000)
const CheckBox = ref()
const username = ref()
const password = ref()
const flog = ref(false)
const show = ref(true)
const hide = ref(true)
const hidden = ref(true)
const count = ref()
const newData = computed(() => {
  return PhoneNumber.value != undefined ? PhoneNumber.value : '请输入验证码'
})
// 手机验证码
const PhoneNumber = ref()
// 正则表达式
let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
const send = async () => {
  if (reg.test(username.value)) {
    const data = await getCode(username.value)
    PhoneNumber.value = data.data
    sessionStorage.setItem('Phone', data.data)
    hide.value = false
    hidden.value = false
    count.value.reset()
    if (time.value === 0) {
      hidden.value = true
      hide.value = true
    }
  } else {
    alert('请输入正确的手机号格式')
  }
}
const Login = async () => {
  if (sessionStorage.getItem('Phone')) {
    if (CheckBox.value.checked) {
      // formData参数
      const formData = new FormData()
      formData.append('mobile', username.value)
      formData.append('code', PhoneNumber.value)
      const data = await PostLogin(formData)
      if (data.code === 200) {
        sessionStorage.setItem('token', data.data)
        push({
          name: 'User',
        })
      }
    } else {
      alert('请勾选用户协议')
    }
  } else {
    alert('请输入正确的验证码')
  }
}
// 密码登录
const passLogin = () => {
  flog.value = !flog.value
  show.value = !show.value
}
const isLogin = computed(() => {
  return show.value === false ? '验证码登录' : '密码登录'
})
</script>
<style lang="scss">
.color {
  display: none;
}
.back {
  position: relative;
  width: 100%;
  height: 21.875rem;
  // background-color: #fd879d;
  .nav {
    position: absolute;
    width: 100%;
    background: rgba($color: #000000, $alpha: 0);
  }
  img {
    width: 100%;
    height: 21.875rem;
  }
  article {
    position: absolute;
    top: 11.25rem;
    left: 0;
    margin: 16px;
    h4,
    h5 {
      color: white;
      font-weight: 400;
      margin: 0.8rem 0;
    }
    h4 {
      font-size: 1.4rem;
    }
    h5 {
      font-size: 0.8rem;
    }
  }
}
.box {
  margin: 16px;
}
#phone,
#password {
  height: 2.5rem;
  background-color: #f1f3f6;
  border-radius: 1.25rem;
  padding-left: 0.9375rem;
}
.first {
  width: 100px;
}
.my-btn1,
.my-btn2 {
  border: none;
}
.my-btn2 {
  margin-bottom: 7.5rem;
}
.my-btn1 .van-button__text {
  color: rgba(99, 205, 244, 1);
}
.btn {
  border: none;
  background-color: white;
}
.btn1 {
  border: none;
  background: rgba(99, 205, 244, 1);
}
.btn1 .van-button__text {
  color: white;
  font-size: 1.2rem;
}
.privacy {
  height: 1rem;
  input {
    margin: 0 0.8rem 0 0;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
  }
  span {
    display: inline-block;
    font-size: 0.8rem;
  }
  span:nth-of-type(2) {
    color: rgba(99, 205, 244, 1);
  }
}
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  p {
    font-size: 1rem;
  }
  width: 100%;
  ul {
    display: flex;
    gap: 4.375rem;
    li {
      display: flex;
      flex: 1;
      justify-content: center;
      img {
        width: 1.1875rem;
        height: 1.0625rem;
      }
    }
  }
}
</style>
